<template>
  <div class="view-exam">
    <div v-for="(item, i) in list" :key="item.id">
      <p>{{item.name}}（{{item.examUserAnswer.length}}题/{{item.totalMark}}分）</p>
      <div v-for="(ite, n) in item.examUserAnswer" :key="ite.id" class="ques-item">
        <div class="ques-item-info">
          <h3 class="ques-item-title">{{ n + 1 }}. {{ ite.question || '' }}</h3>
          <ul class="ques-item-answer">
            <div v-if="ite.type == 1">
              <li v-for="(ans, i) in jsonParse(ite.examAnswer).opt" :class="{'active': ans == getAnswers(ite.examAnswer)}" :key="ans">{{ answerMap[i] }}、{{ ans }}</li>
            </div>
            <div v-if="ite.type == 2">
              <li v-for="(ans, i) in jsonParse(ite.examAnswer).opt" :class="{'active': isSelectActive(ite.examAnswer, ans)}" :key="ans">{{ answerMap[i] }}、{{ ans }}</li>
            </div>
            <div v-if="ite.type == 3">
              <li v-for="ans in yesOrNo.opt" :class="{'active': ans == getAnswers(ite.examAnswer)}" :key="ans" >{{ ans }}</li>
            </div>
            <div v-if="ite.type == 4">
              <li><el-input :disabled="true" :value="getAnswers(ite.examAnswer)" placeholder=""/></li>
            </div>
            <div v-if="ite.type == 5">
              <li><el-input :disabled="true" :value="getAnswers(ite.examAnswer)" :rows="2" type="textarea" placeholder=""/></li>
            </div>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'ViewRush',
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        answerMap: {
          0: 'A',
          1: 'B',
          2: 'C',
          3: 'D',
          4: 'E',
          5: 'F',
          6: 'G',
          7: 'H'
        },
        yesOrNo: { 'opt': ['对', '错'], 'answer': [] }
      }
    },
    methods: {
      isSelectActive(answer, ans) {
        var answrArr = JSON.parse(answer).answer
        for (var i = 0, l = answrArr.length; i < l; i++) {
          if (ans === answrArr[i]) {
            return true
          }
        }
        return false
      },
      jsonParse(str) {
        return window.JSON.parse(str)
      },
      getAnswers(str) {
        var t = window.JSON.parse(str)
        var answer = t.answer
        this.answerType = t.type
        if (t.type === 1) {
          return answer[0]
        } else if (t.type === 2) {
          return answer
        } else {
          return answer[0]
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $mainColor: #18A5FD;
  .view-exam{
    max-height: 600px;
    overflow: auto;
    .ques-item{
      margin-bottom: 10px;
      display: flex;
      .ques-item-info{
        padding: 10px 20px;
        background-color: #F7F7F8;
        position: relative;
        flex: 1;
      }
      .ques-item-btn{
        position: relative;
        width: 40px;
        i{
          position: absolute;
          top: 50%;
          margin-top: -8px;
          left: 50%;
          margin-left: -8px;
          cursor: pointer;
        }
      }
      .ques-item-title{
        width: 80%;
        font-size:14px;
        font-family:PingFangSC-Medium;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin: 0;
      }
      .ques-item-answer{
        margin: 0;
        padding: 0;
        margin-top: 5px;
        margin-left: 15px;
        width: 80%;
        li{
          list-style: none;
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height: 30px;
          &.active{
            color: $mainColor;
          }
        }
      }
      .ques-item-score{
        width: 120px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -14px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        .el-input{
          margin: 0 5px;
        }
      }
    }
  }
</style>
